<template>
    <div class="thumbnail">
        <h3>{{picInfo.title}}</h3>
        <p>
            <span>发表时间：2020.2.1 14:51:21</span>
            <span>点击：0次</span>
        </p>
         <div class="thumbs">
         <vue-preview :slides="list" class="preview-img"></vue-preview>
         </div>
         <p>{{picInfo.info}}</p>
        <comment :com="com" @nextPage="next"></comment>
    </div>
</template>

<script>
import comment from "../comment.vue"
export default {
    data(){
        return{
             com:[],
              page:1,
              picInfo:[],
              list:[]
        }
    },
    components: {
        comment
    },
    computed:{
        addPage(){
            return this.page
        }
    },
    methods:{
        getData(){
            var showCom = []
             this.$http.get("http://comment.com").then(result=>{
                this.com = result.body.data;
                 
                this.com.forEach(item=>{
                    if(item.page<=this.addPage){
                        showCom.push(item)   
                    }
                })
                this.com = showCom;
            })
            
        },
        next(){
            this.page+=1;
            this.getData()
        },
        getPic(){
            this.$http.get("http://imagesinfo.com").then(result=>{
                
                    result.body.some(item=>{
                    if(item.id == this.$route.params.id){
                        this.picInfo = item;
                        return true
                    }
                })
                
            })
        },
        getThumbsList(){
            this.$http.get("http://thumbnail.com").then(result=>{
                 var pic=result.body.list
               pic.forEach(item=>{
                item.w = 600;
                item.h = 400;
                item.src = item.src;
                item.msrc=item.src;
                })
                this.list = pic
    
            })
        },
   },
 created() {
            this.getData(),
            this.getPic(),
            this.getThumbsList()
    },

}
</script>

<style>

figure {
    margin: 0 !important
    
}
body{
    background: #fff !important
}
.thumbnail .preview-img:after{
    content:"";
   clear: both;
   display: block;
   *zoom:1
}
.thumbnail .preview-img img{
     width: 100px;
     float: left;
     vertical-align: top;
     margin-right: 10px;
     height: 70px;
     margin-bottom: 5px
 }
 .thumbnail h3{
     text-align: center
 }
</style>